<template>
  <div class="login-container">
    <!-- 
      el-from 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
     -->
  <div class="login-head">

  </div>
  <!-- 
    配置 form 表单验证
    1，必须给 el-from 组件绑定 model 为表单数据对象
    2，给需要验证的表单项 el-form-item 绑定 prop属性
       注意：prop属性需要指定表单对象中的数据名称
    3, 通过 el-from 组件的 rules 属性配置验证规则
    具体的验证规则可参考
    如果内置的验证规则不满足，也可以自定义验证规则

    手动触发表单验证：
    1，给 el-form 设置 ref,  起个名字（随便起名 只要和当前页面中其他ref不重复即可）
    2，通过 ref 获取 el-from 这个表单组件，调用组件的 validate 进行验证
   -->
<el-form
  class="login-form"
  ref="login-form"
  :model="user"
  :rules="formRules"
>
  <el-form-item prop="mobile">
    <el-input
    placeholder="请输入手机号"
    v-model="user.mobile"></el-input>
  </el-form-item>
  <el-form-item  prop="code">
    <el-input
    placeholder="请输入验证码"
     v-model="user.code"></el-input>
  </el-form-item>
  <el-form-item prop="agree">
    <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
  </el-form-item>
  <el-form-item>
    <el-button
    class="login-btn"
    type="primary"
    :loading="loginLoading"
    @click="onLogin">登录</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import { login } from '@/api/user'

export default {
  name: 'LoginIndex',
  data() {
    return {
      user: {
          mobile: '13911111111',// 手机号
          code: '246810',//验证码
          agree: false //是否同意协议        
        },
      // checked: false, //是否同意协议的选中状态
      loginLoading: false, //登录的loading状态
      formRules: { //表单验证规则配置
        // 要验证的数据名称: 规则列表[]
        mobile: [
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' },
          ],
        code: [
            { required: true, message: '验证码不能为空', trigger: 'change' },
            { pattern: /^\d{6}$/, message: '请输入正确的验证码格式'}
          ],
        agree: [
            {
              // 自定义校验规则
              // 验证通过: callback()
              // 验证失败: callback(new Error('错误消息'))
              // validator验证函数不是你来调用的，而是当 element 表单触发验证的时候它会自己内部调用这个函数 并且给你传递一些参数进来
              // 所以你只需要提供校验函数处理逻辑就可以了
              // 通过：callback()
            validator:(rule, value, callback) => {
              if (value) {
                // 验证通过
                callback()
              } else {
                // 验证失败的错误提示消息
                callback(new Error('请同意用户协议'))
              }
            },
            // message: '请勾选同意用户协议',
            trigger: 'change'
            }
        ]
      }
    }
  },
  methods: {
      onLogin () {
        // 获取表单数据(根据接口要求绑定数据）
        // const user = this.user 

        // 表单验证
        // validate 方法是异步的
        this.$refs['login-form'].validate(valid => {
          // console.log(valid); //true
          // 如果表单验证失败, 停止请求提交 
          if (!valid) {
            return
          } else {
          // 验证通过，提交登录
          this.login()
          }
        })
        

       
        // 处理后端响应结果
        //  成功：、、、、
        //  失败：、、、、

      },
      login () {
         // 开启登录中 loading
        this.loginLoading = true

        // 对于代码中的请求操作
        // 1，接口请求可能需要重用
        // 2，实际工作中，接口非常容易变动，改起来麻烦
        // 我们建议的做法就是把所有的请求都封装成函数然后统一的组织到模块中给它进行管理
        // 这种做法 好处就是 管理维护更方便 重用也方便  
        // 怎么做:
        login(this.user).then(res => {
          // 登录成功
          
          this.$message({
            message: '登录成功',
            type: 'success'
        })
          // 关闭loading
          this.loginLoading = false

          // 任何地方都能访问本地存储数据
          // 将接口返回的用户相关数据放到本地存储，方便应用数据共享
          // 本地存储只能存储字符串
          // 如果需要存储对象，数组类型的数据，则把他们转为JSON格式字符串进行存储(注意json格式字符串和普通字符串区别 前者能还原)
          window.localStorage.setItem('user',JSON.stringify(res.data.data))

          // 跳转到首页
          this.$router.push('/')
        }).catch(err => {
          // 登录失败

          this.$message.error('登录失败，手机号或验证码错误');

          // 关闭loading
          this.loginLoading = false
        })
      }
    }
}
</script>

<style scoped lang="less">
  .login-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex; //设置为flex布局
    flex-direction: column;
    justify-content: center; //水平居中
    align-items: center;  //垂直居中
    background: url("./login_bg.jpg") no-repeat;

    // background-size 背景填充模式
    background-size: cover; //cover使图片的短边显示出来。contain使图片的长边显示出来
    .login-head {
    width: 300px;
    height: 57px;
    background: url("./logo_index.png") no-repeat;
    margin-bottom:30px;
    }
    .login-form {
    background: #fff;
    padding: 50px;
    min-width: 300px;
    .login-btn {
      width: 100%;
    }
    }
  }
  
  
  
</style>